Support Node ESM #3630

snowystinger · 2022-10-12T01:35:01Z

I've updated the NextJS test app to use ESM. There is a comment on a commit 5dd5f72#comments that was built against our local packages in the branch. This should be sufficient to say that we support ESM now with the other changes in this PR.

I've included a circleci test to run against all our built packages with esm

This is old, I'm leaving it in to explain some things we considered
This brought up some other issues in order to get it working. All our icon imports needed to have the '.js' suffix and also needed to be imported correctly from packages and not direct from 'src' directories.
I needed to update node so I could write a CSS loader for NodeJS. This resulted in some tests getting updated because the Intl formatting was updated by Node. I've matched it against current Chrome implementation and it matches.
It also required me to make it ok in the linter for package circular dependencies where the circle is just itself, this is seen in react-aria/i18n, it'll be checked in the verdaccio step, though may cause some issues for yarn 2 or pnpm.

BLOCKED BY #3706

✅ Pull Request Checklist:

Included link to corresponding React Spectrum GitHub Issue.
Added/updated unit tests and storybook for this change (for new code or code which already has tests).
Filled out test instructions.
Updated documentation (if it already exists for this component).
Looked at the Accessibility Practices for this feature - Aria Practices

📝 Test Instructions:

Test apps generated with published packages, last time they were built is on this commit 5dd5f72#comments
commits after that were unrelated and should not affect this

Test apps generated in normal build comment

You can also verify these locally, if you're running the esm test, then you must be on node > 16.18. Though the above comments should take care of anything you'd do locally.

🧢 Your Project:

adobe-bot · 2022-10-12T02:46:51Z

Build successful! 🎉

adobe-bot · 2022-10-12T02:46:52Z

Build successful! 🎉

vstreame · 2022-10-12T17:18:34Z

@snowystinger Thanks for doing this! BTW on my local patch-package, this is what I did:

diff --git a/dist/module.js b/dist/module.mjs
similarity index 99%
rename from dist/module.js
rename to dist/module.mjs
index 363c04eaa6f97ac44194025a6456829d02bc1210..6c0f9b3a6704d4b3507bd4945a0a21527d0a09fb 100644
--- a/dist/module.js
+++ b/dist/module.mjs
@@ -695,4 +695,4 @@ function $fdbe26a36ce1c672$export$736bf165441b18c7() {
 
 
 export {$fd933927dbac1f15$export$46d604dce8bf8724 as shouldKeepSpectrumClassNames, $fd933927dbac1f15$export$f9d3bfd10703eb31 as keepSpectrumClassNames, $fd933927dbac1f15$export$ce4ab0c55987d1ff as classNames, $bde65b0159e7c06e$export$a5f5a6912b18861c as getWrappedElement, $3df547e395c4522f$export$32d5543ab307c01 as useMediaQuery, $98e5a8ae0e6415af$export$a5795cc979dfae80 as createDOMRef, $98e5a8ae0e6415af$export$79d69eee6ae4b329 as createFocusableRef, $98e5a8ae0e6415af$export$c2c55ef9111cafd8 as useDOMRef, $98e5a8ae0e6415af$export$96a734597687c040 as useFocusableRef, $98e5a8ae0e6415af$export$c7e28c72a4823176 as unwrapDOMRef, $98e5a8ae0e6415af$export$1d5cc31d9d8df817 as useUnwrapDOMRef, $380ed8f3903c3931$export$fe9c6e915565b4e8 as baseStyleProps, $380ed8f3903c3931$export$e0705d1a55f297c as viewStyleProps, $380ed8f3903c3931$export$abc24f5b99744ea6 as dimensionValue, $380ed8f3903c3931$export$f348bec194f2e6b5 as responsiveDimensionValue, $380ed8f3903c3931$export$f3c39bb9534218d0 as convertStyleProps, $380ed8f3903c3931$export$b8e6fb9d2dff3f41 as useStyleProps, $380ed8f3903c3931$export$46b6c81d11d2c30a as passthroughStyle, $380ed8f3903c3931$export$52dbfdbe1b2c3541 as getResponsiveProp, $59d09bcc83651bf9$export$1e5c9e6e4e15efe3 as useSlotProps, $59d09bcc83651bf9$export$365cf34cda9978e2 as cssModuleToSlots, $59d09bcc83651bf9$export$8107b24b91795686 as SlotProvider, $59d09bcc83651bf9$export$ceb145244332b7a2 as ClearSlots, $54cda195bd4173fb$export$e52e2242b6d0f1d4 as useHasChild, $fdbe26a36ce1c672$export$736bf165441b18c7 as useIsMobileDevice, $857d64dbfd73d664$re_export$useValueEffect as useValueEffect, $1051245f87c5981d$export$8214320346cf5104 as BreakpointProvider, $1051245f87c5981d$export$140ae7baa51cca23 as useMatchedBreakpoints, $1051245f87c5981d$export$199d6754bdf4e1e3 as useBreakpoint, $857d64dbfd73d664$re_export$useResizeObserver as useResizeObserver};
-//# sourceMappingURL=module.js.map
+//# sourceMappingURL=module.mjs.map
diff --git a/dist/module.js.map b/dist/module.mjs.map
similarity index 100%
rename from dist/module.js.map
rename to dist/module.mjs.map
diff --git a/package.json b/package.json
index 7afca4093e0b4bcecc0d9a10b9639d7e3ce8dad4..85f3bd6e0b20c3b16651e38fc37215b39dcacc9e 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,11 @@
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
   "main": "dist/main.js",
-  "module": "dist/module.js",
+  "module": "dist/module.mjs",
+  "exports": {
+    "import": "./dist/module.mjs",
+    "require": "./dist/main.js"
+  },
   "types": "dist/types.d.ts",
   "source": "src/index.ts",
   "files": [

By making the module file end with .mjs as well as adding the conditional export all of the ESM loading was fixed both for NodeJS as well as continued to work for ESBuild

adobe-bot · 2022-10-12T23:42:41Z

Build successful! 🎉

adobe-bot · 2022-10-13T00:16:23Z

Build successful! 🎉

adobe-bot · 2022-10-13T00:24:14Z

Build successful! 🎉

adobe-bot · 2022-10-13T21:21:15Z

Build successful! 🎉

packages/@adobe/react-spectrum/package.json

packages/@internationalized/string-compiler/package.json

ktabors

LGTM, the supportESM.js seems to be the script made to update all the package.json files and is around to run in case we forget to manually do this on new packages in the future, right?

.circleci/comment.js

examples/rsp-next-ts/next.config.mjs

packages/@react-aria/progress/package.json

packages/@react-spectrum/alert/package.json

snowystinger · 2022-11-21T19:15:26Z

bin/imports.js

+  meta: {
+    fixable: 'code'
+  },
+  create: function (context) {


no actual change to this logic, it's just indented one level and wrapped differently to match new eslint requirements

snowystinger · 2022-11-21T19:17:15Z

packages/@react-spectrum/badge/test/Badge.test.js

@@ -11,7 +11,7 @@
 */

 import {Badge} from '../';
-import CheckmarkCircle from '@spectrum-icons/workflow/src/CheckmarkCircle';
+import CheckmarkCircle from '@spectrum-icons/workflow/CheckmarkCircle';


corrected all instance of imports like this, we should never import icons from the src file

snowystinger · 2022-11-21T19:22:35Z

packages/@spectrum-icons/ui/scripts/generateIcons.js

@@ -34,7 +34,7 @@ function template(iconName) {
    let jsx = compileSVG(path.join(expressDir, expressName + '.svg'), 'ExpressIcon');

    return (
-`import {${iconName} as IconComponent} from '@adobe/react-spectrum-ui/dist/${iconName}';
+`import {${iconName} as IconComponent} from '@adobe/react-spectrum-ui/dist/${iconName}.js';


@adobe/react-spectrum-ui only provides CJS, so we include the file extension to force any loaders to recognize that as opposed to everywhere else where we let the loader choose which one it wants to use

snowystinger · 2022-11-21T19:23:25Z

scripts/esm-support/loader.mjs

+  },
+});
+
+export async function resolve(specifier, context, next) {


this is a fake css loader, it's only needed for our esm test build, it does not get used anywhere else

adobe-bot · 2022-11-21T19:27:09Z

Build successful! 🎉

adobe-bot · 2022-11-21T19:34:58Z

Build successful! 🎉

LFDanLu · 2022-11-22T00:35:01Z

plop-templates/@react-aria/package.json.hbs

@@ -7,6 +7,11 @@
  "main": "dist/main.js",
  "module": "dist/module.js",
  "types": "dist/types.d.ts",
+  "exports": {
+    "types": "dist/types.d.ts",
+    "import": "dist/module.js",


Small thing: these should be

Suggested change

"import": "dist/module.js",

"import": "dist/module.mjs",

right? Same issue for the other plop templates if so

ugh, yep, i'll do here so we can back out if we need to easily

adobe-bot · 2022-11-22T00:53:39Z

Build successful! 🎉

adobe-bot · 2022-11-22T00:59:20Z

Build successful! 🎉

vstreame · 2022-11-22T19:26:38Z

Congrats @snowystinger ! What an amazing feat to pull this off!

snowystinger · 2022-12-02T00:54:42Z

Adding an update to reduce the size of some of our files
#3810 will comment here again when it's merged

snowystinger · 2022-12-04T20:07:33Z

#3810 has been merged, it'll be in the nightlies starting tonight

This reverts commit 5198442. # Conflicts: # yarn.lock

devongovett · 2022-12-13T00:04:19Z

Unfortunately, we had to revert this for now. It broke webpack 4, which still has more downloads per week than webpack 5. See #3839 for details. We may be able to regroup in the new year, but so far we haven't found a solution that works across all tools.

Pagebakers · 2023-01-16T20:23:40Z

@devongovett Any chance this is getting picked up again? Not using .mjs for the esm bundle (as per spec) is causing issues as you can read in the mention above.

snowystinger · 2023-01-17T18:19:29Z

Yes, this is still on our radar and something we'd like to address. We're accepting contributions and ideas on how to address the webpack 4 issue. It may be a sprint or two before we get back to it.

Pagebakers · 2023-01-27T08:57:31Z

I read up on the issue in #3839. Seems like the exact same thing I'm running into now with Next.js (and webpack 5). Unfortunately there is only one way forward and that's to use .mjs extensions.

This fixes it for me in Next.js. Not an ideal solution, but it might be necessary for webpack4 users to add a custom config moving forward.

module.exports = {
  transpilePackages: ['@saas-ui/date-picker'],
  // optional
  webpack(config, options) {
    config.module.rules.push({
        type: 'javascript/auto',
        test: /\.mjs$/,
        use: [options.defaultLoaders.babel],
    })
    return config
  }
}

devongovett · 2023-02-10T00:06:23Z

I think I got a new approach working in #4038

snowystinger added 3 commits October 10, 2022 23:49

Support Node ESM

c51d4e8

fix exports field

73b37a3

Merge branch 'main' into support-esm

273a6ee

snowystinger added 2 commits October 12, 2022 16:35

Change our nextjs app to esm

09b34df

run verdaccio build on this branc

a7a72a6

snowystinger added 2 commits October 12, 2022 16:56

fix typo

fa880e1

restore verdaccio build to main

b171e38

snowystinger marked this pull request as ready for review October 13, 2022 00:08

Merge branch 'main' into support-esm

024022a

reidbarber previously approved these changes Oct 13, 2022

View reviewed changes

Merge branch 'main' into support-esm

0199e65

snowystinger dismissed reidbarber’s stale review via 0199e65 October 13, 2022 21:10

reidbarber previously approved these changes Oct 13, 2022

View reviewed changes

devongovett reviewed Oct 13, 2022

View reviewed changes

packages/@adobe/react-spectrum/package.json Outdated Show resolved Hide resolved

add subfields

6ef6151

snowystinger dismissed reidbarber’s stale review via 6ef6151 October 13, 2022 21:59

mischnic reviewed Oct 14, 2022

View reviewed changes

packages/@internationalized/string-compiler/package.json Outdated Show resolved Hide resolved

ktabors previously approved these changes Oct 14, 2022

View reviewed changes

.circleci/comment.js Outdated Show resolved Hide resolved

examples/rsp-next-ts/next.config.mjs Show resolved Hide resolved

ktabors reviewed Oct 14, 2022

View reviewed changes

packages/@react-aria/progress/package.json Show resolved Hide resolved

packages/@react-spectrum/alert/package.json Outdated Show resolved Hide resolved

snowystinger added 2 commits October 14, 2022 14:59

Merge branch 'main' into support-esm

5862a6d

remove module from node only pkg

1cde05e

snowystinger dismissed ktabors’s stale review via 1cde05e October 14, 2022 23:02

restore verdaccio to main

b97a830

snowystinger commented Nov 21, 2022

View reviewed changes

undo whitespace change to NumberField test

6b7437b

snowystinger commented Nov 21, 2022

View reviewed changes

undo verdaccio cleanup change for non-m1 macs

1f0423a

reidbarber previously approved these changes Nov 21, 2022

View reviewed changes

LFDanLu reviewed Nov 22, 2022

View reviewed changes

fix plop templates

2bd119a

snowystinger dismissed reidbarber’s stale review via 2bd119a November 22, 2022 00:45

Merge branch 'main' into support-esm

bb0b68c

LFDanLu approved these changes Nov 22, 2022

View reviewed changes

reidbarber approved these changes Nov 22, 2022

View reviewed changes

snowystinger merged commit 5198442 into main Nov 22, 2022

snowystinger deleted the support-esm branch November 22, 2022 18:07

devongovett added a commit that referenced this pull request Dec 12, 2022

Revert "Support Node ESM (#3630)"

0a49fc4

This reverts commit 5198442. # Conflicts: # yarn.lock

devongovett mentioned this pull request Dec 12, 2022

Revert ESM #3839

Merged

Pagebakers mentioned this pull request Jan 16, 2023

Nextjs fails to detect ESM modules correctly when using exports in package.json vercel/next.js#39375

Open

1 task

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Support Node ESM #3630

Support Node ESM #3630

snowystinger commented Oct 12, 2022 •

edited

Loading

adobe-bot commented Oct 12, 2022

adobe-bot commented Oct 12, 2022

vstreame commented Oct 12, 2022 •

edited

Loading

adobe-bot commented Oct 12, 2022

adobe-bot commented Oct 13, 2022

adobe-bot commented Oct 13, 2022

adobe-bot commented Oct 13, 2022

ktabors left a comment

snowystinger Nov 21, 2022

snowystinger Nov 21, 2022

snowystinger Nov 21, 2022

snowystinger Nov 21, 2022

adobe-bot commented Nov 21, 2022

adobe-bot commented Nov 21, 2022

LFDanLu Nov 22, 2022

snowystinger Nov 22, 2022

adobe-bot commented Nov 22, 2022

adobe-bot commented Nov 22, 2022

vstreame commented Nov 22, 2022

snowystinger commented Dec 2, 2022

snowystinger commented Dec 4, 2022

devongovett commented Dec 13, 2022

Pagebakers commented Jan 16, 2023

snowystinger commented Jan 17, 2023

Pagebakers commented Jan 27, 2023 •

edited

Loading

devongovett commented Feb 10, 2023

Support Node ESM #3630

Support Node ESM #3630

Conversation

snowystinger commented Oct 12, 2022 • edited Loading

✅ Pull Request Checklist:

📝 Test Instructions:

🧢 Your Project:

adobe-bot commented Oct 12, 2022

adobe-bot commented Oct 12, 2022

vstreame commented Oct 12, 2022 • edited Loading

adobe-bot commented Oct 12, 2022

adobe-bot commented Oct 13, 2022

adobe-bot commented Oct 13, 2022

adobe-bot commented Oct 13, 2022

ktabors left a comment

Choose a reason for hiding this comment

snowystinger Nov 21, 2022

Choose a reason for hiding this comment

snowystinger Nov 21, 2022

Choose a reason for hiding this comment

snowystinger Nov 21, 2022

Choose a reason for hiding this comment

snowystinger Nov 21, 2022

Choose a reason for hiding this comment

adobe-bot commented Nov 21, 2022

adobe-bot commented Nov 21, 2022

LFDanLu Nov 22, 2022

Choose a reason for hiding this comment

snowystinger Nov 22, 2022

Choose a reason for hiding this comment

adobe-bot commented Nov 22, 2022

adobe-bot commented Nov 22, 2022

vstreame commented Nov 22, 2022

snowystinger commented Dec 2, 2022

snowystinger commented Dec 4, 2022

devongovett commented Dec 13, 2022

Pagebakers commented Jan 16, 2023

snowystinger commented Jan 17, 2023

Pagebakers commented Jan 27, 2023 • edited Loading

devongovett commented Feb 10, 2023

snowystinger commented Oct 12, 2022 •

edited

Loading

vstreame commented Oct 12, 2022 •

edited

Loading

Pagebakers commented Jan 27, 2023 •

edited

Loading